<template>
    <div>
        <home-header></home-header>
        <!-- <home-swiper></home-swiper> -->
        <home-information :num="totalNum" :schema="schema" :finished="finished" :totalPull="totalPull"></home-information>
        <!-- <home-search></home-search> -->
        <div class="iconfont enter" @click="handleTableClick">
            <span class="enter-content">表格模式</span>&#xe689;
        </div>
        <list v-show="show" :listData="CanList" :listTitle="titleList" :schema="schema" @cancle="handleTableClick" @change="handleChange" :flen="flen"></list>
        <home-list :list="CanList" :schema="schema" @change="handleChange" :listTitle="titleList" :flen="flen"></home-list>
        <!-- <-footer></home-footer> -->
    </div>
</template>

<script>
import { mapState } from 'Vuex'
import axios from 'axios'
import HomeHeader from './components/header'
import HomeList from './components/list'
import list from './list'
// import HomeSwiper from './components/swiper'
import HomeSearch from './components/search'
import HomeInformation from './components/information'
// import HomeFooter from './components/footer'
export default {
  name: 'Home',
  computed: {
    ...mapState(['voteId']),
    ...mapState(['themeId']),
    totalNum () {
      return this.CanList.length
    }
  },
  components: {
    HomeHeader,
    HomeList,
    list,
    // HomeFooter,
    // HomeSwiper,
    HomeInformation,
    HomeSearch
  },
  data () {
    return {
      CanList: [{
      //   'cId': '0001',
      //   'cInfo': {
      //   '姓名': '111',
      //   '性别': '222',
      //   '单位': '333',
      //   '工作': '444'
      //   }  
      // },  {
      //   'cId': '0002',
      //   'cInfo': {
      //   '姓名': '111',
      //   '性别': '222',
      //   '单位': '333',
      //   '工作': '444'
      //   }  
      // },  {
      //   'cId': '0003',
      //   'cInfo': {
      //   '姓名': '111',
      //   '性别': '222',
      //   '单位': '333',
      //   '工作': '444'
      //   }  
      }],
      schema: '',
      finished: 0,
      totalPull: '',
      show: false,
      titleList: [],
      flen: 0
    }
  },
  methods: {
    handleTableClick () {
      this.show = !this.show
    },
    handleChange (length) {
      // console.log(length)
      this.finished = length
    },
    getPersonInfo () {
         // console.log(this.themeId)
      axios.post('http://192.168.43.188:8081/getVoteCandidates', {
        'vid': this.voteId,
        'vcid': this.themeId
      }).then(({status, data}) => {
        if (status === 200) {
          // console.log(data)
          if (data.msg === '111') {
            this.schema = data.mode
            this.CanList = data.info
            this.totalPull = data.anum
            this.flen = data.flen
            // console.log(this.totalPull)
          }
        }
      }).catch((error) => {
        swal('Info' +  error, '', 'error')
      })
    }
  },
  updated () {
    const listtitle = []
    if (!this.titleList.length && this.CanList[0]) {
      for (let i in this.CanList[0].cInfo) {
        listtitle.push(i)
      }
      // console.log(listtitle)
      this.titleList = listtitle
    }
  },
  mounted () {
    this.getPersonInfo()
  }
}
</script>

<style lang="stylus" scoped>
  div
    background: #eee
  .enter
    font-size: .45rem
    text-align: right
    padding: .1rem 1rem .1rem .1rem
    .enter-content
        font-size: .3rem
        line-height: .45rem
        padding-right: .2rem
</style>
